<template>
  <!-- 加入圈子页面同人脉资料编辑页面 -->
  <view class="main">
    <view class="top">
      <image
        @tap="toPage()"
        class="back"
        src="../../images/aliang/left.png"
        mode="widthFix"
      ></image>
      <text class="title" v-if="isUser == 1">编辑个人资料</text>
      <text class="title" v-else>进入{{ name }}</text>
      <text></text>
    </view>
    <view class="content">
      <view class="input-box">
        <view class="title"> 真实姓名 </view>
        <input
          v-model="realName"
          :disabled="true"
          maxlength="11"
          type="text"
          value=""
          placeholder-class="placehold"
          placeholder="请输入真实姓名"
        />
      </view>
      <!-- v-if="isBindApp" v-if="isUserFriendsPay == 1" -->
      <view class="input-box" v-if="isUserFriendsPay == 1">
        <view class="title"> 手机号 </view>
        <input
          v-if="isPhone"
          :disabled="true"
          maxlength="11"
          v-model="phone"
          type="number"
          value=""
          placeholder-class="placehold"
          placeholder="请输入手机号码"
        />
        <input
          v-if="!isPhone"
          v-model="phone"
          :disabled="true"
          maxlength="11"
          type="number"
          value=""
          placeholder-class="placehold"
          placeholder="请输入手机号码"
        />
      </view>
      <view class="input-box" v-if="isUser == 1">
        <view class="title"> 手机号 </view>
        <input
          :disabled="true"
          maxlength="11"
          v-model="phone"
          type="number"
          value=""
          placeholder-class="placehold"
          placeholder="请输入手机号码"
        />
      </view>
      <view class="input-box">
        <view class="title"> 公司名称 </view>
        <input
          v-model="company"
          type="text"
          maxlength="28"
          value=""
          placeholder-class="placehold"
          placeholder="请输入公司名称"
        />
      </view>
      <view class="input-box">
        <view class="title"> 职位 </view>
        <input
          v-model="department"
          maxlength="5"
          type="text"
          value=""
          placeholder-class="placehold"
          placeholder="请输入职位"
        />
      </view>
      <view class="specialty">
        <view class="title">
          <text>特长</text>
          <text
            class="bianji"
            v-show="tcList.length > 0 && !is_tcbianji"
            @tap="tc_bianji(1)"
            >编辑</text
          >
          <text
            class="bianji"
            v-show="tcList.length > 0 && is_tcbianji"
            @tap="tc_bianji(2)"
            >完成</text
          >
        </view>
        <view class="tag">
          <view
            class="biaoqianList"
            v-for="(item, index) in tcList"
            :key="index"
          >
            {{ item }}
            <image
              v-show="is_tcbianji"
              src="../../images/circle/bq_cloce.png"
              @tap="select(1, index)"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="biaoqian" @tap="add(1)">
          <image src="../../images/circle/add.png" mode="aspectFill"></image>
          <text>添加标签</text>
        </view>
      </view>
      <view class="demand">
        <view class="title">
          <text>需求</text>
          <text
            class="bianji"
            v-show="xqList.length > 0 && !is_xqbianji"
            @tap="xq_bianji(1)"
            >编辑</text
          >
          <text
            class="bianji"
            v-show="xqList.length > 0 && is_xqbianji"
            @tap="xq_bianji(2)"
            >完成</text
          >
        </view>
        <view class="tag">
          <view
            class="biaoqianList"
            v-for="(item, index) in xqList"
            :key="index"
          >
            {{ item }}
            <image
              v-show="is_xqbianji"
              src="../../images/circle/bq_cloce.png"
              @tap="select(2, index)"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <view class="biaoqian" @tap="add(2)">
          <image src="../../images/circle/add.png" mode="aspectFill"></image>
          <text>添加标签</text>
        </view>
      </view>
    </view>
    <view class="finish" v-if="isUser == 1" @tap="goQz()">
      <view class="btn">完成</view>
    </view>
    <view class="finish" v-else @tap="goQz()">
      <view class="btn">进入圈子</view>
    </view>
    <!-- 遮罩 -->
    <view
      class="zhezhao"
      v-if="is_show"
      @tap.self="closeShow"
      @touchstart.self.prevent="closeShow"
    >
      <!-- 弹层 -->
      <view class="bianqian_input" v-show="is_tanceng">
        <view class="title">添加标签</view>
        <view class="text">
          <input
            type="text"
            v-model="text"
            maxlength="7"
            placeholder="请输入标签(2-7个字)"
          />
        </view>
        <view class="botton" @tap.stop="queding()">确定</view>
        <image
          src="../../images/circle/close.png"
          @tap.stop="closeShow()"
          mode="aspectFill"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      department: " ",
      company: " ",
      realName: "",
      name: " ",
      id: "",
      userData: {},
      isUser: "",
      isBindApp: true,
      isPhone: false,
      is_show: false,
      is_tanceng: false,
      if_tc: null,
      tcList: [],
      xqList: [],
      isShare: "",
      isUserFriendsPay: "",
      text: "",
      listId: "",
      index: "",
      is_tcbianji: false,
      is_xqbianji: false,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.isBindApp = options.isBindApp;
    this.name = options.name;
    this.isUser = options.isUser;
    this.isShare = options.isShare;
    this.isUserFriendsPay = options.isUserFriendsPay;
    this.listId = options.listId;
    this.index = options.index;
    // this.user()
    if (options.index) {
      this.qzcyData();
    } else {
      this.user();
    }
  },
  methods: {
    add(index) {
      this.is_show = true;
      this.is_tanceng = true;
      if (index == 1) {
        this.if_tc = true;
      } else {
        this.if_tc = false;
      }
    },
    tc_bianji(type) {
      if (type == 1) {
        this.is_tcbianji = true;
      } else {
        this.is_tcbianji = false;
      }
    },
    xq_bianji(type) {
      if (type == 1) {
        this.is_xqbianji = true;
      } else {
        this.is_xqbianji = false;
      }
    },
    closeShow() {
      this.is_show = false;
      this.is_tanceng = false;
      this.text = "";
    },
    select(item, index) {
      if (item == 1) {
        this.tcList.splice(index, 1);
      } else {
        this.xqList.splice(index, 1);
      }
    },
    queding() {
      if (this.text.trim().length == 0) {
        uni.showToast({
          title: "请输入标签名",
          duration: 2000,
          icon: "none",
        });
        this.text = "";
        return;
      } else if (this.text.trim().length < 2) {
        uni.showToast({
          title: "至少输入两个字符",
          duration: 2000,
          icon: "none",
        });
      } else {
        this.is_show = false;
        this.is_tanceng = false;
        if (this.if_tc) {
          this.tcList.push(this.text);
        } else {
          this.xqList.push(this.text);
        }
        this.text = "";
      }
    },
    wancheng() {
      if (this.name == "") {
        uni.showToast({
          title: "请输入真实姓名",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (this.company == "") {
        uni.showToast({
          title: "请输入公司名称",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (this.company.length > 28) {
        uni.showToast({
          title: "公司名称最多输入28个字",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (this.department.trim() == "") {
        uni.showToast({
          title: "请输入职位名称",
          duration: 2000,
          icon: "none",
        });
        this.department = "";
        return;
      }
      if (this.isUserFriendsPay == 1) {
        if (this.phone == "") {
          uni.showToast({
            title: "请输入手机号码",
            duration: 2000,
            icon: "none",
          });
          return;
        } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
          uni.showToast({
            title: "手机号格式有误",
            duration: 1000,
            icon: "none",
          });
          return;
        }
      }
      this.bianji();
    },
    // 获取当前用户信息
    user() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/userInformation/getNewOtherBusinessCard?",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          viewUid: "",
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // that.userData = res.data.data
          if (res.data.data.telphone.substring(0, 4) == "0000") {
            that.phone = "";
          } else if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(res.data.data.telphone)) {
            that.phone = res.data.data.telphone;
            that.isPhone = true;
          } else {
            that.phone = res.data.data.telphone;
          }
          that.department = res.data.data.post;
          that.company = res.data.data.company;
          that.realName = res.data.data.realName;
        }
      });
    },
    // 圈子成员
    qzcyData() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/orgCircle/memberList",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgId: this.id,
          pageSize: 30,
          pageNumber: 1,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.data.rows);
          this.userData = res.data.data.rows[this.index];
          this.tcList = res.data.data.rows[this.index].specialtyList;
          this.xqList = res.data.data.rows[this.index].demandList;
          that.phone = res.data.data.rows[this.index].telphone;
          that.department = res.data.data.rows[this.index].companyPositions;
          that.company = res.data.data.rows[this.index].circleCompany;
          that.realName = res.data.data.rows[this.index].applyName;
        }
      });
    },
    bianji() {
      let token = uni.getStorageSync("token");
      const that = this;
      var personal = uni.getStorageSync("personal");
      console.log(personal);
      if (this.isUser == 1) {
        this.request({
          url: "h5/circle/updateCircleUserInfo",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            company: this.company,
            companyPositions: this.department,
            specialty: this.tcList,
            demand: this.xqList,
            id: this.listId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (that.isUser == 1) {
              if (that.isShare == 1) {
                uni.redirectTo({
                  url:
                    "/pages/circle/index?id=" +
                    that.id +
                    "&isShare=1" +
                    "&isUser=1",
                });
              } else {
                uni.redirectTo({
                  url: "/pages/circle/index?id=" + that.id + "&isUser=1",
                });
              }
            } else {
              if (that.isShare == 1) {
                uni.redirectTo({
                  url:
                    "/pages/circle/index?id=" +
                    that.id +
                    "&type=3" +
                    "&isShare=1",
                });
              } else {
                uni.redirectTo({
                  url: "/pages/circle/index?id=" + that.id + "&type=3",
                });
              }
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      } else {
        this.request({
          url: "h5/userInformation/updateUserInformation",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data:
            this.isUserFriendsPay == 1
              ? {
                  name: this.realName,
                  companyName: this.company,
                  deptName: this.department,
                  telephone: this.phone,
                  verificationCode: "",
                  openId: personal.openId,
                  accessToken: personal.accessToken,
                  orgId: this.id,
                  specialty: this.tcList,
                  demand: this.xqList,
                }
              : {
                  name: this.realName,
                  companyName: this.company,
                  deptName: this.department,
                  verificationCode: "",
                  openId: personal.openId,
                  accessToken: personal.accessToken,
                  orgId: this.id,
                  specialty: this.tcList,
                  demand: this.xqList,
                },
        }).then((res) => {
          if (res.data.code == 200) {
            if (that.isUser == 1) {
              if (that.isShare == 1) {
                uni.redirectTo({
                  url:
                    "/pages/circle/index?id=" +
                    that.id +
                    "&isShare=1" +
                    "&isUser=1",
                });
              } else {
                uni.redirectTo({
                  url: "/pages/circle/index?id=" + that.id + "&isUser=1",
                });
              }
            } else {
              if (that.isShare == 1) {
                uni.redirectTo({
                  url:
                    "/pages/circle/index?id=" +
                    that.id +
                    "&type=3" +
                    "&isShare=1",
                });
              } else {
                uni.redirectTo({
                  url: "/pages/circle/index?id=" + that.id + "&type=3",
                });
              }
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    goQz() {
      this.wancheng();
    },
    toPage() {
      if (this.isShare == 1) {
        uni.redirectTo({
          url: "/pages/circle/index?id=" + this.id + "&isUser=1" + "&isShare=1",
        });
      } else {
        uni.redirectTo({
          url: "/pages/circle/index?id=" + this.id + "&isUser=1",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.zhezhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}
.bianqian_input {
  width: 614rpx;
  height: 430rpx;
  background: #ffffff;
  opacity: 1;
  border-radius: 8rpx;
  position: absolute;
  top: 50vh;
  left: 68rpx;
  margin-top: -215rpx;
  text-align: center;
  padding: 0 24rpx;
  z-index: 2;
  box-sizing: border-box;
  .title {
    font-size: 36rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: bold;
    color: #111111;
    margin-top: 50rpx;
  }
  .text {
    width: 566rpx;
    height: 120rpx;
    background: #ffffff;
    border-radius: 8rpx;
    margin: 48rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    input {
      width: 100%;
      height: 100%;
      border: 1rpx solid #dddddd;
    }
  }
  .botton {
    width: 566rpx;
    height: 80rpx;
    background: #0f6ede;
    border-radius: 8rpx;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
  image {
    width: 38rpx;
    height: 38rpx;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
  }
}
.main {
  padding-top: 106rpx;
  padding-bottom: 130rpx;
  box-sizing: border-box;
  .phoneBind_ {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);

    .content_ {
      padding: 50rpx 24rpx;
      padding-bottom: 36rpx;
      box-sizing: border-box;
      position: absolute;
      width: 614rpx;
      height: 522rpx;
      background: #ffffff;
      border-radius: 8rpx;
      top: 300rpx;
      left: 50%;
      transform: translateX(-50%);

      > image {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        top: 30rpx;
        right: 30rpx;
      }

      .title_ {
        text-align: center;
        font-size: 36rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #111111;
        margin-bottom: 55rpx;
      }

      .row_ {
        height: 110rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #ddd;
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;

        text {
          font-size: 32rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: right;
          color: #0f6ede;
        }
      }

      .btn_ {
        margin-top: 50rpx;
        width: 566rpx;
        height: 80rpx;
        background: #0f6ede;
        border-radius: 8rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  .top {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 106rpx;
    padding: 0 29rpx 0 30rpx;
    background-color: #0f6ede;
    box-sizing: border-box;
    z-index: 10;
    .back {
      width: 31rpx;
    }

    .title {
      width: 470rpx;
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }

  .content {
    padding: 0 36rpx;
    font-size: 34rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #111111;

    .input-box {
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px -1px 0px 0px #eeeeee inset;
      font-size: 32rpx;
      text-align: right;

      input {
        width: 500rpx;
      }
    }

    .placehold {
      font-size: 32rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #999999;
    }
    .specialty,
    .demand {
      margin-top: 56rpx;
      .biaoqian {
        width: 242rpx;
        height: 80rpx;
        background: #f7f7f7;
        border: 1rpx solid #eeeeee;
        border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #111111;
        margin-top: 20rpx;
        image {
          width: 38rpx;
          height: 38rpx;
          margin-right: 20rpx;
        }
      }
      .title {
        font-size: 34rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #111111;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bianji {
          font-size: 24rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #0f6ede;
        }
      }
      .tag {
        display: flex;
        flex-wrap: wrap;
        .biaoqianList {
          height: 80rpx;
          padding: 0 32rpx;
          background: #f7f7f7;
          border: 1rpx solid #eeeeee;
          border-radius: 8rpx;
          margin-right: 36rpx;
          font-size: 32rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #111111;
          text-align: center;
          line-height: 80rpx;
          margin-bottom: 20rpx;
          position: relative;
          image {
            width: 16rpx;
            height: 16rpx;
            position: absolute;
            top: 8rpx;
            right: 8rpx;
          }
        }
      }
    }
    .specialty {
    }
    .demand {
    }
  }

  .finish {
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1rpx solid #eeeeee;
    .btn {
      width: 700rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #0f6ede;
      border-radius: 8rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
  }
}
</style>
